<template>
  <el-tabs
    v-model="data.activeTab"
    class="demo-tabs"
    @tab-click="handleClickTab"
  >
    <el-tab-pane label="充电订单" name="charge">
      <Table
        v-if="data.activeTab === 'charge'"
        ref="tableRef"
        :url="URL_PAGINGUSERCURRENTORDERT"
        :columns="data.columns"
        :handles="data.handles"
        :query="data.query"
      ></Table>
    </el-tab-pane>
    <el-tab-pane label="实时占用记录" name="occupy">
      <Table
        v-if="data.activeTab === 'occupy'"
        ref="tableOccupyRef"
        :url="URL_PAGINGOCCUPYORDERUSER"
        :columns="occupyData.columns"
        :handles="occupyData.handles"
        :query="occupyData.query"
        :params="{ status: 0 }"
      ></Table
    ></el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup name="userRealTimeOrderList">
import Table from '@/components/table/index.vue';
import { queryDicByParent } from '@/service/apis/api';
import {
  URL_PAGINGUSERCURRENTORDERT,
  queryStopCharge,
  URL_PAGINGOCCUPYORDERUSER,
} from '@/service/apis/order';

const router = useRouter();

const tableRef = ref();
const tableOccupyRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      if (data.activeTab === 'occupy') {
        tableOccupyRef.value?.getData();
      } else {
        tableRef.value?.getData();
      }
    }
  });
});

const data = reactive({
  activeTab: 'charge',
  columns: [
    {
      prop: 'startChargeSeq',
      label: '充电单号',
      width: 260,
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
      width: 160,
    },
    {
      prop: 'mobile',
      label: '用户手机号',
      width: 120,
    },
    {
      prop: 'orgName',
      label: '归属企业',
      width: 140,
    },
    {
      prop: 'plateNumber',
      label: '充电车辆',
    },
    {
      prop: 'chargedTime',
      label: '充电时长',
      width: 140,
    },
    {
      prop: 'totalPower',
      label: '已充电量（度）',
      width: 120,
    },
    {
      prop: 'soc',
      label: '当前SOC（%）',
      width: 120,
      template: (row: any, index: number) => {
        return row?.soc?.toString() || '--';
      },
    },
    {
      prop: 'stationName',
      label: '电站名称',
      width: 160,
    },
    {
      prop: 'connectorCode',
      label: '终端编码',
      width: 140,
    },
    {
      prop: 'operatorName',
      label: '运营商',
      width: 160,
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      width: 140,
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'chargeType',
      label: '充电方式',
      width: 140,
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'startTime',
      label: '开始充电时间',
      width: 160,
    },
    {
      prop: 'flowStartChargeSeq',
      label: '流量方流水号',
      width: 120,
    },
  ],
  handles: [
    {
      label: '详情',
      permission: 'userRealTimeOrderList.see',
      handle: (row: any) => {
        console.log('详情---', row);
        router.push({
          name: 'userRealTimeOrderDetail',
          query: { id: row.orderId },
        });
      },
    },
    {
      label: '终止充电',
      color: '#35C1EA',
      permission: 'userRealTimeOrderList.stop',
      handle: (row: any) => {
        ElMessageBox.confirm('确定要终止充电吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          queryStopCharge({
            startChargeSeq: row.startChargeSeq,
            connectorId: row.connectorCode,
            stopReason: '20302',
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  query: [
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '充电单号',
      prop: 'startChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入充电单号',
      },
    },
    {
      label: '终端编码',
      prop: 'connectorCode',
      comName: 'input',
      props: {
        placeholder: '请输入终端编码',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '开始充电',
      prop: 'data',
      comName: 'date',
      keys: ['startChargingStartTime', 'startChargingEndTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '充电方式',
      prop: 'chargeType',
      comName: 'select',
      props: {
        placeholder: '请选择充电方式',
        options: [] as any,
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '运营商属性',
      prop: 'operatorAttr',
      comName: 'select',
      props: {
        placeholder: '请选择运营商属性',
        options: [] as any,
      },
    },
    {
      label: '订单来源',
      prop: 'chargeSource',
      comName: 'select',
      props: {
        placeholder: '请选择订单来源',
        options: [] as any,
      },
    },
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
    {
      label: '运营商',
      prop: 'operatorName',
      comName: 'input',
      props: {
        placeholder: '请输入运营商',
      },
    },
    {
      label: '充电车辆',
      prop: 'plateNumber',
      comName: 'input',
      props: {
        placeholder: '请输入充电车辆',
      },
    },
    {
      label: '流量方流水号',
      prop: 'flowStartChargeSeq',
      comName: 'input',
      props: {
        placeholder: '请输入流量方流水号',
      },
    },
  ],
});
const occupyData = reactive({
  columns: [
    {
      prop: 'orderId',
      label: '占用订单号',
      width: 260,
    },
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'orgType',
      label: '是否实际扣费',
      dic: [] as any,
      type: Number,
      // template: (row: any, index: number) => {
      //   if (row.orgType == 0) {
      //     return '否';
      //   } else if (row.orgType == 1) {
      //     return '是';
      //   } else {
      //     return '--';
      //   }
      // },
    },
    {
      prop: 'stationName',
      label: '电站名称',
    },
    {
      prop: 'connectorName',
      label: '占用终端名称',
    },
    {
      prop: 'connectorId',
      label: '占用终端编码',
    },
    {
      prop: 'durationHours',
      label: '占用时长',
    },
    {
      prop: 'chargeSource',
      label: '订单来源',
      dic: [] as any,
      type: Number,
    },
    {
      prop: 'startTime',
      label: '占位开始时间',
    },
  ],
  handles: [
    {
      label: '详情',
      permission: 'realTimeOrderList.see',
      handle: (row: any) => {
        console.log('详情---', row);
        router.push({
          name: 'userRealOccupyOrderDetail',
          query: { id: row.id },
        });
      },
    },
    // {
    //   label: '手动结束',
    //   color: '#35C1EA',
    //   permission: 'realTimeOrderList.stop',
    //   handle: (row: any) => {
    //     router.push({
    //       name: 'userOccupyOrderStop',
    //       query: { id: row.id },
    //     });
    //   },
    // },
  ],
  query: [
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '占用终端编码',
      prop: 'connectorId',
      comName: 'input',
      props: {
        placeholder: '请输入占用终端编码',
      },
    },
    {
      label: '占用开始时间',
      prop: 'data',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '电站名称',
      prop: 'stationName',
      comName: 'input',
      props: {
        placeholder: '请输入电站名称',
      },
    },
  ],
});

if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
  data.columns.splice(9, 0, {
    prop: 'shortcutCode',
    label: '快捷码',
  });
  data.query[2] = {
    label: '快捷码',
    prop: 'shortcutCode',
    comName: 'input',
    props: {
      placeholder: '请输入快捷码',
    },
  };
  // data.query[13] = {
  //   label: '终端编码',
  //   prop: 'connectorCode',
  //   comName: 'input',
  //   props: {
  //     placeholder: '请输入终端编码',
  //   },
  // };

  data.query.splice(3, 0, {
    label: '终端编码',
    prop: 'connectorCode',
    comName: 'input',
    props: {
      placeholder: '请输入终端编码',
    },
  });

  occupyData.query[1] = {
    label: '占用终端快捷码',
    prop: 'shortcutCode',
    comName: 'input',
    props: {
      placeholder: '请输入占用终端快捷码',
    },
  };
  occupyData.query.splice(2, 0, {
    label: '占用终端编码',
    prop: 'connectorId',
    comName: 'input',
    props: {
      placeholder: '请输入占用终端编码',
    },
  });
  occupyData.columns.splice(6, 0, {
    prop: 'shortcutCode',
    label: '占用终端快捷码',
  });
}

queryDicByParent({
  listDtos: [
    'operatorProperties',
    'chargeSourceEnum',
    'chargeTypeEnum',
    'orgType',
  ],
}).then((res: any) => {
  if (res) {
    occupyData.columns[3].dic = [...res.orgType];
    if (import.meta.env.VITE_ENV_TYPE === 'lznt') {
      data.query[6].props.options = [...res.chargeTypeEnum];
      data.query[8].props.options = [...res.operatorProperties];
      data.query[9].props.options = [...res.chargeSourceEnum];
      data.columns[12].dic = [...res.chargeSourceEnum];
      data.columns[13].dic = [...res.chargeTypeEnum];
      occupyData.columns[9].dic = [...res.chargeSourceEnum];
    } else {
      data.query[5].props.options = [...res.chargeTypeEnum];
      data.query[7].props.options = [...res.operatorProperties];
      data.query[8].props.options = [...res.chargeSourceEnum];
      data.columns[11].dic = [...res.chargeSourceEnum];
      data.columns[12].dic = [...res.chargeTypeEnum];
      occupyData.columns[8].dic = [...res.chargeSourceEnum];
    }
  }
});
const handleClickTab = (e: any) => {};
</script>